<template>
  <div class="flexContent">
    <!-- 线上门店分录 -->
    <h3>线上门店分录信息</h3>
    <div class="top">
      <div class="rows">
        <span class="col">
          <div class="txt">分录仓库:</div>
          <el-select
            v-model="warehouseId"
            popper-class="eloption"
            placeholder="请选择"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </span>
        <span class="col">
          <div class="txt">门店名称:</div>
          <span>{{ orderDetail.storeName }}</span>
        </span>
        <span class="col">
          <div class="txt">收货地址:</div>
          <span>{{ orderDetail.address }}</span>
        </span>
      </div>
      <div class="rows">
        <span class="col">
          <div class="txt">出仓总价:</div>
          <span>{{ commodityAmount }}元</span>
        </span>
        <span class="col">
          <div class="txt">订单总额:</div>
          <span
            >{{
              orderDetail.totalAmount ? orderDetail.totalAmount : "-"
            }}元</span
          >
        </span>
        <span class="col">
          <div class="txt">实付金额:</div>
          <span
            >{{ orderDetail.payAmount ? orderDetail.payAmount : "-" }}元</span
          >
        </span>
      </div>
      <div class="rows">
        <span class="col">
          <div class="txt">点采编号:</div>
          <span
            v-for="item in pickLists"
            :key="item"
            style="word-wrap: break-word"
            >{{ item }}</span
          >
        </span>
        <span class="col">
          <div class="txt">订单编号:</div>
          <span>{{ orderDetail.tradeNo }}</span>
        </span>
      </div>
    </div>
    <div class="add">
      <el-button
        class="addBtn"
        :disabled="!warehouseId"
        @click="getStoreOrderList"
        >调点采</el-button
      >
    </div>
    <div class="table">
      <div>
        <el-table
          border
          class="tablebox"
          :data="tableData"
          max-height="462px"
          size="medium"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          />
          <el-table-column
            label="商品名称"
            prop="commodityName"
            align="center"
          />
          <el-table-column label="商品条码" prop="barCode" align="center" />
          <el-table-column
            align="center"
            label="规格"
            prop="commodityStandard"
          />
          <el-table-column align="center" label="单位" prop="commodityUnit" />
          <el-table-column
            align="center"
            label="产地"
            prop="commodityProducer"
          />
          <el-table-column align="center" label="数量" prop="procureCount" />
          <el-table-column
            align="center"
            label="现有库存"
            prop="inventoryNum"
          />
          <el-table-column align="center" label="在途库存" prop="transitNum" />
        </el-table>
      </div>
    </div>
    <div class="returnBtn">
      <el-button class="celBtn" @click="returnList">返 回</el-button>
      <el-button class="addBtn" @click="definiteEntryFn">确 定</el-button>
    </div>
    <!-- @select-all="selFn"
    @select="selFn" -->
    <el-dialog
      title="调点采"
      :visible.sync="dialogTableVisible"
      width="70%"
      @close="cancelFn"
    >
      <h3>调点采</h3>
      <!-- <el-table border :data="gridData1" ref="multipleTable" class="tablebox" height="202px" @row-click="handlerClick"
        @selection-change="selFn" size="medium"> -->
      <el-table
        border
        :data="gridData1"
        ref="multipleTable"
        class="tablebox"
        height="202px"
        @current-change="showRow"
        highlight-current-row
        size="medium"
      >
        <el-table-column label="序号" width="80" align="center">
          <template scope="scope">
            <el-radio v-model="radio" class="radio" :label="scope.$index"
              ><span @click.native.stop>{{ scope.$index + 1 }}</span></el-radio
            >
          </template>
        </el-table-column>
        <!-- <el-table-column type="selection" align="center" width="55" /> -->
        <el-table-column
          property="pickNumber"
          align="center"
          label="点采编号"
        />
        <el-table-column property="tradeNo" align="center" label="订单编号" />
        <el-table-column property="storeName" align="center" label="门店名称" />
        <el-table-column
          property="totalAmount"
          align="center"
          label="订单总额"
        />
        <el-table-column property="payAmount" align="center" label="实付金额" />
        <el-table-column property="orderTime" align="center" label="下单时间">
          <template v-slot="{ row }">
            <span>{{ row.orderTime | parseTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <h3 style="padding-top: 30px">点采明细</h3>
      <el-table
        border
        :data="gridData2"
        class="tablebox"
        height="202px"
        size="medium"
      >
        <el-table-column type="index" align="center" label="序号" width="80" />
        <el-table-column
          property="commodityName"
          align="center"
          label="商品名称"
        />
        <el-table-column
          property="commodityStandard"
          align="center"
          label="规格"
        />
        <el-table-column property="commodityUnit" align="center" label="单位" />
        <el-table-column
          property="commodityProducer"
          align="center"
          label="产地"
        />
        <el-table-column
          property="procureNumber"
          align="center"
          label="件数(配送规格)"
        />
        <el-table-column property="procureCount" align="center" label="数量" />
        <el-table-column
          property="commodityBrand"
          align="center"
          label="品牌"
        />
      </el-table>
      <div slot="footer">
        <el-button class="celBtn" @click="cancelFn">取消</el-button>
        <el-button class="addBtn" @click="confirmFn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { print, checkPrinter } from "@/utils/printLODOP";
import { getShopDetail } from "@/api/shop";
import {
  getWarehouseList,
  getStorePickUpOrder,
  getStorePickUpOrderDetail,
  addStorePickUpOrder,
  definiteEntry,
} from "@/api/entrycenter";
export default {
  name: "EntryCenterSetting",
  data() {
    return {
      storeDetails: {},
      orderDetail: {
        address: "",
        storeName: "",
        totalAmount: "",
        payAmount: "",
        tradeNo: "",
      },
      warehouseList: [],
      tableData: [],
      gridData1: [],
      gridData2: [],
      pickList: [],
      pickLists: [],
      pickId: "",
      dialogTableVisible: false,
      id: "",
      warehouseId: "",
      commodityAmount: 0,
      // warehouseName: '',
      dayList: {
        1: "周一",
        2: "周二",
        3: "周三",
        4: "周四",
        5: "周五",
        6: "周六",
        7: "周日",
      },
      radio: "",
      selected: {},
      // 打印数据数组
      printArray: [],
    };
  },
  created() {
    this.id = this.$route.query.id ? this.$route.query.id : "";
    this.getShopDetail();
    this.getWarehouseList();
  },
  methods: {
    async getShopDetail() {
      const res = await getShopDetail({ id: this.id });
      if (res.code === 200) {
        console.log(res.data, "门店详情");
        this.storeDetails = res.data.store;
      }
    },
    async getWarehouseList() {
      const res = await getWarehouseList();
      if (res.code === 200) {
        this.warehouseList = res.data;
        if (this.warehouseList.length === 0) {
          this.warehouseId = "";
          this.$message.warning("暂无仓库");
          return;
        }
        this.warehouseId = this.warehouseList[0].id;
        // this.warehouseName = this.warehouseList[0].name
        console.log(this.warehouseList, "仓库列表");
      }
    },
    returnList() {
      this.closeTag("entrycenter");
    },
    cancelFn() {
      this.pickList = [];
      this.gridData2 = [];
      this.gridData1 = [];
      this.pickId = "";
      this.radio = "";
      this.dialogTableVisible = false;
    },
    // 获取点采订单
    async getStoreOrderList() {
      this.dialogTableVisible = true;
      const res = await getStorePickUpOrder({
        entryStatus: "0",
        storeId: this.id,
      });
      if (res.code === 200) {
        console.log(res.data, "点采订单");
        this.gridData1 = res.data;
      }
    },
    // handlerClick(row) {
    //   this.$refs.multipleTable.toggleRowSelection(row);
    // },
    // async selFn(selection) {
    //   this.gridData2 = [];
    //   // console.log(selection, row, 'selection')
    //   this.pickList = selection.map((item) => item.pickNumber);
    //   console.log(this.pickList, "this.pickList");
    //   this.pickId = this.pickList[this.pickList.length - 1];
    //   console.log(this.pickId, "this.pickId");
    //   if (this.pickId) {
    //     const res = await getStorePickUpOrderDetail({
    //       storeId: this.id,
    //       pickNumber: this.pickId,
    //       submitStatus: "1",
    //     });
    //     if (res.code === 200) {
    //       this.gridData2 = res.data;
    //       console.log(this.gridData2, "this.gridData2");
    //     }
    //   }
    // },
    async confirmFn() {
      if (this.pickList.length == 0) {
        this.$message.warning("请选择点采单");
        return;
      }
      const res = await addStorePickUpOrder({
        pickList: this.pickList,
        warehouseId: this.warehouseId,
      });
      if (res.code === 200) {
        this.orderDetail.address = this.selected.address;
        this.orderDetail.storeName = this.selected.storeName;
        this.orderDetail.totalAmount = this.selected.totalAmount;
        this.orderDetail.payAmount = this.selected.payAmount;
        this.orderDetail.tradeNo = this.selected.tradeNo;
        // console.log(res.data, "@@@@@@@@");
        this.pickLists = this.pickList.map((item) => item);
        // console.log(rsaDecrypt(res.data), '解密')
        this.dialogTableVisible = false;
        this.gridData2 = [];
        // this.$message.success('提交成功')
        console.log(res.data, "res.data");
        this.tableData = res.data.storeRequireVoList;
        console.log(this.tableData, "this.tableData");
        this.commodityAmount = res.data.commodityAmount;
      }
    },
    async definiteEntryFn() {
      // print(this.printArray);
      // console.log(333333);
      // return ;
      let hasPrinter = checkPrinter();
      if (this.pickLists.length === 0)
        return this.$message.warning("请选择点采单");
      const res = await definiteEntry({
        storeId: this.id,
        warehouseId: this.warehouseId,
        pickList: this.pickLists,
      });
      if (res.code === 200) {
        this.printArray = res.data.chooseOrderVoList;
        if (hasPrinter) {
          print(this.printArray);
        }
        console.log(res.data, "成功");
        this.$message.success("分录成功,拣货单正在打印");
        this.closeTag("entrycenter");
      } else if (res.code === 76001) {
        this.$alert(res.message, "错误", {
          type: "error",
          confirmButtonText: "返回",
        }).then(() => {
          this.closeTag("entrycenter");
        });
      } else {
        // this.$message.error(res.message)
      }
    },
    async showRow(row) {
      if (row) {
        this.radio = this.gridData1.indexOf(row);
        this.selected = row;
        this.pickList = [];
        this.pickList.push(row.pickNumber);
        console.log("row", row);
        this.pickId = row.pickNumber;
        console.log(this.pickId, "this.pickId");
        if (this.pickId) {
          const res = await getStorePickUpOrderDetail({
            storeId: this.id,
            pickNumber: this.pickId,
            submitStatus: "1",
          });
          if (res.code === 200) {
            this.gridData2 = res.data;
            console.log(this.gridData2, "this.gridData2");
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.flexContent {
  h3 {
    margin: 0;
    margin-bottom: 10px;
  }

  .top {
    padding-bottom: 10px;

    .rows {
      display: flex;
      margin-bottom: 10px;
      min-height: 40px;
      line-height: 40px;

      .col {
        width: 33%;
        display: flex;
        padding-right: 10px;
        vertical-align: middle;

        .txt {
          width: 80px;
        }

        .dateClass {
          padding: 0 5px;
          display: inline-block;
          margin-right: 5px;
          background-color: rgb(113, 113, 240);
          color: #fff;
          font-size: 12px;
          border-radius: 3px;
          margin-bottom: 5px;
        }

        .pickList {
          display: flex;
          flex: 1;
          flex-wrap: wrap;

          .pickListItem {
            flex: 1;
            height: 30px;
            padding: 0 5px;
            margin-bottom: 5px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
